<template>
  <div>
    <!-- el-menu-item表示子菜单项,index设置为路由path，则可以跳转 -->
    <el-menu-item :index="item.path || 'not'" v-if="item.children.length==0">
      <i class="el-icon-user-solid"></i>
      {{ item.menuName }}
    </el-menu-item>
    <!-- index不能为null-->
    <el-submenu :index="fullPath || 'not'" v-else>
      <template slot="title">
        <i class="el-icon-user"></i>
        <span>{{ item.menuName }}</span>
      </template>
      <MyMenuItem v-for="(child,index) in item.children" :key="index" :item="child"></MyMenuItem>
    </el-submenu>
  </div>
</template>
<script>

export default {
  name: "MyMenuItem",
  props: ["item"],
  computed: {
    fullPath() {
      // 如果 path 已经以 /main 开头就直接用，否则拼接 路由使用绝对路径.直接查找对应路由跳转不拼接父级路由地址
      if (!this.item.path) return '';
      return this.item.path.startsWith('/main')
          ? this.item.path
          : '/main' + this.item.path;
    }
  }
}
</script>

<style scoped>

</style>
